<template>
  <div class="twoBox">
    <div class="activityData" >
      <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="100px">
        <el-form-item label="" prop="query">
          <el-input v-model="queryParams.query" placeholder="卡名称/发行方" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择">
            <el-option v-for="item in recordTypeList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item> 
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="btnBox">
        <el-switch
          v-model="configValue"
          active-text="前端NFR记录按钮是否显示"
          active-value="2"
          inactive-value="1"
          @change="handleConfigValue"
        >
        </el-switch>
      </div>
      <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
        @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
        <template v-slot:status="{ scope }">
          <p v-if="scope.row.status == 1">否</p>
          <p v-if="scope.row.status == 2">是</p>
        </template>
        <template v-slot:fee="{ scope }">
          <p v-if="scope.row.feeType == 1">{{scope.row.fee}}CoCo</p>
          <p v-else-if="scope.row.feeType == 2">￥{{scope.row.fee}}</p>
          <p v-else-if="scope.row.feeType == 3">{{scope.row.fee}}椰分</p>
          <p v-else>--</p>
        </template>
        <template v-slot:operate="{ scope }">
          <el-button @click="handleExamples(scope.row.id)" size="small">转增管理</el-button>
          <el-button @click="formalities(scope.row.id)" size="small" v-if="scope.row.status == 2">手续费配置</el-button>
        </template>
      </ex-table>
    </div>
    <examples-dialog :id="id" v-bind="$attrs" v-if="examplesVisible" :visible.sync="examplesVisible"
      @success="_handleSuccess" /> 
    <configuration-dialog :id="id" v-bind="$attrs" v-if="configurationVisible" :visible.sync="configurationVisible"
      @success="_handleSuccess" /> 
  </div>
</template>
<script>
import {
  equityConfigList ,
  donationShow,
  getdonationShow
} from '@/api/examplesOf'
import examplesDialog from './examplesDialog'   
import configurationDialog from './configurationDialog'   
import handlePageMixin from "@/mixins/handlePageMixin";
export default {
  name: "shopDetail",
  components: {
    examplesDialog,
    configurationDialog,
  },
  props: {
  },
  mixins: [handlePageMixin],
  data() {
    return {
      examplesVisible: false,
      configurationVisible: false,
      tableData:[],
      recordTypeList: [
        {id: '',value: '全部'},
        {id: '1',value: '不可转赠'},
        {id: '2',value: '可转赠'},
      ],
      total: 0,
      id: '',
      queryParams: {
        query: '',
        status: '',
      },
      configValue: '',
      tableColumn: [{
            prop: "cardName",
            label: "卡名称"
          },
          {
            prop: "functionTypeDict",
            label: "卡功能",
            width: 100
          },
          {
            prop: "issuerName",
            label: "发行方"
          },
          {
            label: "是否可转增",
            slot: true,
            slotName: "status",
          },
          {
            prop: "startTime",
            label: "转增启用时间"
          },
          {
            label: "转赠手续费",
            slot: true,
            slotName: "fee",
          },
          {
            label: "操作",
            slot: true,
            slotName: "operate",
            fixed: "right",
          },
        ],
    };
  },
  watch: {
   
  },
  created() {
    this.getList()
    this.getdonationShow()
  },
  mounted() {
  
  },
  methods: {
    //
    getdonationShow(){
      getdonationShow().then(res => {
        this.configValue = res.result
      })
    },
    //开启或关闭前端nfr
    handleConfigValue(){
      const data = {
        configValue: this.configValue
      }
      donationShow(data).then(res => {
        this.$message({
          message: "保存成功",
          type: "success",
        });
      }).finally(() => {

      });
    },
     search() {
        //搜索
 
        this.pageOptions.pageNum = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
      },
      reset() {

        this.date = [];
        this.pageOptions.pageNum = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
      },
    /** 查询盲盒开奖名单*/
    getList() {
      this.loading = true;
      var data = {
        ...this.pageOptions,
        ...this.queryParams,
      }
      equityConfigList(data).then(response => {
        const {records ,total} = response.result
        console.log('response',response)
        this.tableData = records
        this.$refs.table.pageOptions.total = total;
        this.tableData = this.tableData.map(item => {
          // console.log('item',item)
          Object.keys(item).forEach(key => {
            if (item[key] === '') {
              item[key] = '--'

            }
          })
          return item
        })
        this.total = total
        this.loading = false;
      });
    },
  
    handleConfiguration(row){
      this.configurationVisible = true
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.pageOptions.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm();
      this.$refs["queryForm"].resetFields();
      console.log('this.queryParams', this.queryParams)
      this.handleQuery();
    },
    /* 删除 */
    handleExamples(id) {
      this.examplesVisible = true
      this.id = id
    },
    //手续配置
    formalities(id){
      this.configurationVisible = true
      this.id = id
    },
    _handleSuccess(){
      this.getList()
    },
  },
};
</script>
<style lang="scss" scoped>
.btnBox{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
</style>
